import React, { useState, useEffect, useCallback } from 'react'
import request from '@/utils/request'
import { Table, Button, Input, Popconfirm, message, Space } from 'antd'
import { AudioOutlined } from '@ant-design/icons';

const { Search } = Input;
function List(props) {

    // state = {
    //     page: 1,
    //     pagesize: 5,
    //     datalist: [],
    //     total: 0,
    //     selectIds: [],
    // }
    var url = props.match.path.split('/')[3];

    // console.log("LISTPROPS",url);
    // const [url,setUrl]=useState('/hot')
    const [datalist, setData] = useState([])
    const [selectIds, setSelectIds] = useState([])
    const [pagesize, setPagesize] = useState(5)
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    // console.log(45454545);
    useEffect(async () => {
        // console.log(45454545);
        // setUrl(function(){
        //     return props.match.path.split('/')[3]
        // })
        // console.log(url);
        if (url !== 'edit' && url !== 'add') {
            const { data: { data } } = await request.get('/getTVlist/getTV', {
                params: {
                    // page:page,
                    // pagesize:pagesize,
                    collectionName: url
                }
            })
            setData(function () {
                return data
            })
        }


        // console.log('data=', data)
        // this.setState({
        //     datalist: data.data.result,
        //     total: data.data.total,
        // })

    }, [url])
    // const [qty, cahngeQty] = useState(1)
    const editItem = useCallback((id) => {
        // const { history, location, match } = this.props;
        // console.log('editItem',id,match,location)
        // console.log("LST", props, url);

        props.history.push(props.match.path.replace('/' + url, '') + `/${url}/edit/` + id);
        // props.history.push(props.match.path.replace('/' + url, '') + `/edit/` + id);
        // props.history.push(props.location.pathname)
        // console.log("address", props.match.path.replace('/' + url, ''));
    }, [])
    const removeAllItem = useCallback(async () => {
        // console.log("selectIds",selectIds);
        const { data } = await request.delete(`/deleteTVlist/delete`, {
            data: { selectIds, collectionName: url }
        })
        if (data.code === 200) {
            //    this.setState({
            //        datalist:datalist.filter(item=>item._id !== id)
            //    })
            // message.success(data);
            // this.forceUpdate();
            const { data: { data } } = await request.get('/getTVlist/getTV', {
                params: {
                    // page:page,
                    // pagesize:pagesize,
                    collectionName: url
                }
            })
            setData(function () {
                return data
            })
        }
    })
    const removeItem = useCallback(async (id) => {

        const TvId = []
        TvId.push(id)
        // const { datalist } = this.state;

        const { data } = await request.delete(`/deleteTVlist/delete`, {
            data: { TvId, collectionName: url }
        })

        if (data.code === 200) {
            //    this.setState({
            //        datalist:datalist.filter(item=>item._id !== id)
            //    })
            // message.success(data);
            // this.forceUpdate();
            const { data: { data } } = await request.get('/getTVlist/getTV', {
                params: {
                    // page:page,
                    // pagesize:pagesize,
                    collectionName: url
                }
            })
            setData(function () {
                return data
            })
        }
    }, [])
    const columns = [
        {
            title: '封面',
            dataIndex: 'poster',

            render: text => <img src={text} style={{ width: 60 + 'px' }}></img>
        },
        {
            title: '剧名',
            dataIndex: 'title',

            render: text => <a>{text}</a>,
        },
        {
            title: '评分',
            dataIndex: 'rate',

            render: text => <a>{text}</a>,
        },
        {
            title: '操作',
            width: 240,
            render: (row) => {
                return (
                    <>
                        <Button type="primary" size="small" ghost >查看详情</Button>
                        <Button type="primary" size="small" ghost onClick={editItem.bind(null, row.doubanId)}>编辑</Button>

                        <Popconfirm title="确认删除" onConfirm={
                            () => {
                                removeItem(row.doubanId)
                            }
                        }>
                            <Button size="small" danger >删除</Button>

                        </Popconfirm>
                    </>
                    //</React.Fragment>
                )
            }
        }
    ]

    const rowSelection = {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log('select', selectedRowKeys, selectedRows)
            setSelectIds(selectedRowKeys)
        }
    }
    const showTotal = useCallback((total, range) => {
        setTotal(total)
        return `共${total}条数据`
    }, [datalist])
    const changePageSize=useCallback((page, pageSize) => {
        setPagesize(
            pageSize
        )
    })
    const pagination = {
        size: "small",
        total: total,
        pageSize: pagesize,
        showTotal: showTotal,
        // showTotal(total, range) {
        //     setTotal(function () {
        //         return total
        //     })
        //     return `共${total}条数据`
        // },
        showSizeChanger: true,
        onChange:changePageSize
    }
    // const [dataSearch,setSearch]=useState([])
    const onSearch = useCallback(async (value) => {
        console.log(value);

        const { data: { data } } = await request.get('/getTVlist/getTV', {
            params: {
                // page:page,
                // pagesize:pagesize,
                value,
                collectionName: url
            }
        })
        setData(()=>{return data})
        
        // console.log("");
    }, [url])
    // console.log(dataSearch);
    // componentDidMount() {

    //     this.getData();

    // }

    return (
        <>
            <Popconfirm title="确认删除" onConfirm={

                removeAllItem

            }>
                <Button size="small" danger >批量删除</Button>

            </Popconfirm>
            <Space direction="vertical">
                <Search placeholder="请输入搜索内容" onSearch={onSearch} style={{ width: 200 }} />
            </Space>
            <Table rowKey="doubanId" columns={columns} dataSource={datalist} rowSelection={rowSelection} pagination={pagination} />

        </>
    )
}


export default List;